<!--
 * @Description: 通用Tab切换组件
 * @Author: JiangMing
 * @Date: 2021-09-2 17:52:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-2 17:52:00
-->
<template>
  <view class="common-tab">
    <view class="tab-panel">
      <view
        v-for="(item,index) in list"
        :key="index"
        class="tab-item"
        :class="{'active': item.value == current}"
        :style="{'width': itemWidth}"
        @click="tabClick(item)"
      >
        <view class="tab-item__label">
          <text>{{ item.label }}</text>
          <uni-badge
            v-if="item.badge"
            :text="item.badge"
            type="error"
            size="small"
          />
        </view>
      </view>
    </view>
    <view class="tab-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * @list Array { label, value, badge }
     */
    list: {
      type: Array
    }
  },
  data() {
    return {
      current: ''
    }
  },
  computed: {
    itemWidth() {
      let num = 100/this.list.length;
      return `${num.toFixed(2)}%`
    }
  },
  mounted() {
		console.log(this.list)
    this.current = this.value;
  },
  methods: {
    tabClick(row) {
      this.current = row.value;
      this.$emit('tab-click', row.value, row);
    }
  }
}
</script>

<style lang="scss" scoped>
.common-tab {
  .tab-panel {
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
    box-shadow: 0px 10rpx 10rpx rgba(44, 121, 247, 0.1);
  }
  .tab-content {

  }
  .tab-item {
    text-align: center;
    height: 80rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 2px;
    &.active {
      color: #027AFF;
      &::after {
        content: '';
        display: inline-block;
        width: 90rpx;
        height: 8rpx;
        background: #027aff;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -45rpx;
        border-radius: 0 0 4rpx 4rpx;
      }
    }
    .tab-item__label {
      display: flex;
      align-items: center;
    }
  }
}
</style>